<template>
  <div class="strategy-management-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <h2>策略管理</h2>
          <el-button type="primary" @click="$router.push('/strategy-management/create')">创建策略</el-button>
        </div>
      </template>
      
      <!-- 搜索和筛选区域 -->
      <div class="search-container">
        <el-form :inline="true" class="search-form">
          <el-form-item label="策略名称">
            <el-input v-model="searchForm.name" placeholder="输入策略名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 策略表格 -->
      <el-table :data="filteredStrategies" style="width: 100%" border>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="name" label="策略名称" width="150"></el-table-column>
        <el-table-column prop="description" label="策略描述"></el-table-column>
        <el-table-column label="使用因子" width="180">
          <template #default="scope">
            <el-tag
              v-for="(factor, index) in scope.row.factors"
              :key="index"
              size="small"
              style="margin-right: 5px; margin-bottom: 5px;">
              {{ factor }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="创建者" width="100"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="120"></el-table-column>
        <el-table-column label="操作" fixed="right" width="250">
          <template #default="scope">
            <el-button size="small" @click="viewStrategyDetail(scope.row)">查看</el-button>
            <el-button size="small" type="primary" @click="editStrategy(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteStrategy(scope.$index)">删除</el-button>
            <el-button size="small" type="success" @click="createPortfolio(scope.row)">创建组合</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    
    <!-- 策略详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="策略详情"
      width="700px">
      <div v-if="currentStrategy">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="策略名称">{{ currentStrategy.name }}</el-descriptions-item>
          <el-descriptions-item label="策略描述">{{ currentStrategy.description }}</el-descriptions-item>
          <el-descriptions-item label="使用因子">
            <el-tag
              v-for="(factor, index) in currentStrategy.factors"
              :key="index"
              style="margin-right: 5px;">
              {{ factor }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="创建者">{{ currentStrategy.creator }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ currentStrategy.createTime }}</el-descriptions-item>
        </el-descriptions>
        
        <div class="strategy-performance" style="margin-top: 20px;">
          <h3>策略表现</h3>
          <div class="chart-placeholder" style="height: 300px;">
            <el-empty description="策略绩效图表将在此显示"></el-empty>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'StrategyManagement',
  setup() {
    const store = useStore()
    const router = useRouter()
    const detailDialogVisible = ref(false)
    const currentStrategy = ref(null)
    
    // 搜索表单
    const searchForm = reactive({
      name: '',
      dateRange: []
    })
    
    // 计算属性：获取过滤后的策略列表
    const filteredStrategies = computed(() => {
      return store.getters.getStrategies.filter(strategy => {
        // 名称过滤
        const nameMatch = !searchForm.name || strategy.name.includes(searchForm.name)
        
        // 日期过滤
        let dateMatch = true
        if (searchForm.dateRange && searchForm.dateRange.length === 2) {
          const startDate = searchForm.dateRange[0]
          const endDate = searchForm.dateRange[1]
          const createDate = strategy.createTime
          dateMatch = createDate >= startDate && createDate <= endDate
        }
        
        return nameMatch && dateMatch
      })
    })
    
    // 生命周期钩子
    onMounted(() => {
      store.dispatch('loadStrategies')
    })
    
    // 方法：搜索策略
    const handleSearch = () => {
      // 搜索逻辑由 filteredStrategies 计算属性处理
    }
    
    // 方法：重置搜索
    const resetSearch = () => {
      searchForm.name = ''
      searchForm.dateRange = []
    }
    
    // 方法：查看策略详情
    const viewStrategyDetail = (strategy) => {
      currentStrategy.value = strategy
      detailDialogVisible.value = true
    }
    
    // 方法：编辑策略
    const editStrategy = (strategy) => {
      router.push({
        path: '/strategy-management/create',
        query: { id: strategy.id, mode: 'edit' }
      })
    }
    
    // 方法：删除策略
    const deleteStrategy = (index) => {
      const strategy = filteredStrategies.value[index];
      ElMessageBox.confirm('确定要删除该策略吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        store.dispatch('removeStrategy', strategy.id).then(() => {
          ElMessage.success('删除成功');
        }).catch(error => {
          ElMessage.error('删除失败: ' + error.message);
        });
      }).catch(() => {
        // 取消删除
      })
    }
    
    // 方法：基于策略创建组合
    const createPortfolio = (strategy) => {
      router.push({
        path: '/portfolio-management/create',
        query: { strategyId: strategy.id }
      })
    }
    
    return {
      searchForm,
      detailDialogVisible,
      currentStrategy,
      filteredStrategies,
      handleSearch,
      resetSearch,
      viewStrategyDetail,
      editStrategy,
      deleteStrategy,
      createPortfolio
    }
  }
}
</script>

<style scoped>
.strategy-management-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-container {
  margin-bottom: 20px;
}

.chart-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
}
</style> 